import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Row, Col, Icon, Collapse, Table, Modal } from 'antd';
import { Form, Input, Button, Radio, Select, Upload } from 'antd';
import HTTP from '../../common/http.js';
import 'antd/dist/antd.css';
import './student.css';
import '../../common/common.css';
const FormItem = Form.Item;

class GCUserMgr extends Component {

    constructor(props) {
        super(props);
        this.handleSearch = this.handleSearch.bind(this);
        this.handleResetSearch = this.handleResetSearch.bind(this);
        this.handleCreateUser = this.handleCreateUser.bind(this);
        this.handleCreateUserClose = this.handleCreateUserClose.bind(this);
        this.handleImportUser = this.handleImportUser.bind(this);
        this.handleImportUserClose = this.handleImportUserClose.bind(this);
        this.state = {
            showCreateModal: false,
            showImportModal: false,
            tableColum4User: [
                {
                    key: 'id',
                    title: 'ID',
                    dataIndex: 'id',
                }, {
                    key: 'userName',
                    title: '姓名',
                    dataIndex: 'userName',
                }, {
                    key: 'sex',
                    title: '性别',
                    dataIndex: 'sex',
                }
                , {
                    key: 'phone',
                    title: '电话',
                    dataIndex: 'phone',
                }
                , {
                    key: 'class',
                    title: '班级',
                    dataIndex: 'class',
                }
                , {
                    key: 'operation',
                    title: '操作',
                    render: (text, record) => (
                        <span>
                            <a href="javascript:alert(text)">删除</a>&nbsp;
                            <a href="">成绩</a>&nbsp;
                            <a href="">详细档案</a>
                        </span>
                    ),
                }
            ],
            lstUser: [{
                id: '123451',
                userName: '巩聪',
                sex: 'GG',
                phone: '13683027968',
                class: '高三十班',
            }, {
                id: '123452',
                userName: '巩聪',
                sex: 'GG',
                phone: '13683027968',
                class: '高三十班',
            }]
        }
    }

    componentDidMount() {
        this.props.form.validateFields();
    }

    handleSearch(e) {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                HTTP.post('http://localhost:8088/userMgr/login', { "userName": "cong", "passwd": "gong" }, result => {
                    window.location.href = "http://localhost:8088/static/index.html";
                }, error => {

                });
                console.log("values:" + values);
            } else {
                console.log("error");
            }
        });
    }
    handleResetSearch(e) {
        e.preventDefault();
    }
    handleCreateUser() {
        this.setState({ showCreateModal: true });
    }
    handleCreateUserClose() {
        this.setState({ showCreateModal: false });
    }
    handleImportUser() {
        this.setState({ showImportModal: true });
    }
    handleImportUserClose() {
        this.setState({ showImportModal: false });
    }
    render() {
        const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;
        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            },
            getCheckboxProps: record => ({
                disabled: record.name === 'Disabled User', // Column configuration not to be checked
                name: record.name,
            }),
        };

        return (

            <div>
                <Collapse defaultActiveKey={['advicedSearch', 'studentList']}>
                    <Collapse.Panel header="高级搜索" key='advicedSearch'>
                        <Form onSubmit={this.handleSearch} className="ant-advanced-search-form">
                            <Row type='flex' justify='center'>
                                <Col span={8}>
                                    <FormItem label='姓名'>
                                        {
                                            getFieldDecorator('userName', {})(
                                                <Input />
                                            )
                                        }
                                    </FormItem>
                                </Col>
                                <Col span={8}>
                                    <FormItem label='年级'>
                                        {
                                            getFieldDecorator('sex', {})(
                                                <Input style={{ width: '100%' }} />
                                            )
                                        }
                                    </FormItem>
                                </Col>
                                <Col span={8}>
                                    <FormItem label='班级'>
                                        {
                                            getFieldDecorator('grade', {})(
                                                <Input />
                                            )
                                        }
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row type='flex' justify='center'>
                                <Col offset={16} span={8}>
                                    <Button type='primary'>查询</Button>
                                    <Button type='primary' style={{ marginLeft: '30px' }}>查询</Button>
                                </Col>
                            </Row>
                        </Form>
                    </Collapse.Panel>
                    <Collapse.Panel header="学生列表" key='studentList'>
                        <Row>
                            <Col span={24}>
                                <Button.Group>
                                    <Button onClick={this.handleCreateUser}>新建</Button>
                                    <Button onClick={this.handleImportUser}>导入</Button>
                                    <Button>删除</Button>
                                </Button.Group>

                            </Col>
                        </Row>
                        <Row>
                            <Col span={24}>
                                <Table rowSelection={rowSelection} columns={this.state.tableColum4User} dataSource={this.state.lstUser}></Table>
                            </Col>
                        </Row>
                    </Collapse.Panel>
                </Collapse>
                <Modal title='新建' visible={this.state.showCreateModal} onCancel={this.handleCreateUserClose} onOk={this.handleCreateUserClose}>
                    <Form className="ant-advanced-search-form">
                        <FormItem label='学号'>
                            {
                                getFieldDecorator('studentId', {
                                    rules: [
                                        {
                                            requied: true,
                                            message: '请输入学号'
                                        }
                                    ]
                                }
                                )(
                                    <Input />
                                    )
                            }
                        </FormItem>
                        <FormItem label='姓名'>
                            {
                                getFieldDecorator('userName', {
                                    rules: [
                                        {
                                            requied: true,
                                            message: '输入姓名'
                                        }
                                    ]
                                }
                                )(
                                    <Input />
                                    )
                            }
                        </FormItem>
                        <FormItem label='性别'>
                            {
                                getFieldDecorator('sex', {})(
                                    <Radio.Group >
                                        <Radio value='MALE'>男</Radio>
                                        <Radio value='FEMALE'>女</Radio>
                                    </Radio.Group>
                                )
                            }
                        </FormItem>
                        <FormItem label='年级'>
                            {
                                getFieldDecorator('grade', {})(
                                    <Select>
                                        <Select.Option value='ONE'>高一</Select.Option>
                                        <Select.Option value='TWO'>高二</Select.Option>
                                        <Select.Option value='THREE'>高三</Select.Option>
                                    </Select>
                                )
                            }
                        </FormItem>
                        <FormItem label='班级'>
                            {
                                getFieldDecorator('clazz', {})(
                                    <Select>
                                        <Select.Option value='1'>一班</Select.Option>
                                        <Select.Option value='2'>二班</Select.Option>
                                        <Select.Option value='3'>三班</Select.Option>
                                    </Select>
                                )
                            }
                        </FormItem>
                        <FormItem label='电话'>
                            {
                                getFieldDecorator('phone', {}
                                )(
                                    <Input />
                                    )
                            }
                        </FormItem>
                    </Form>
                </Modal>
                <Modal title='导入' visible={this.state.showImportModal} onCancel={this.handleImportUserClose} onOk={this.handleImportUserClose}>
                    <Upload>
                            <Button>
                                <Icon type='upload'>选择上传的文件...</Icon>
                            </Button>
                    </Upload>
                    <Button>
                            <Icon type='download'>下载模板</Icon>
                    </Button>
                </Modal>
            </div>
        );
    }
}
GCUserMgr = Form.create()(GCUserMgr);
ReactDOM.render(<GCUserMgr />, document.body);